<template>
    <orh-table reload  @on-reload="refresh" pages :pageDate="pageDate" @on-page-change="pagesData">

        <DatePicker @on-change="daterangeChange" style="width:200px;margin-left: -9px;" size="small" type="daterange" placeholder="请选择时间段" slot="returntosuperior"></DatePicker>

        <Select v-model="section" style="width:100px;margin: 0 10px;" clearable slot="returntosuperior" size="small">
            <Option v-for="(item, index) in sectionList" :key="index" :value="item.value">{{ item.label }}</Option>
        </Select>
        
        <Button type="primary" @click="handleSubmit" size="small" slot="returntosuperior">筛选</Button>

        <Table border stripe :columns="columns" :data="data" :loading="tableload" slot="table"></Table>

        <orh-sidebar v-model="show" title="查看详情" scale slot="others">
            <component :is="content" :condition="condition"></component>
        </orh-sidebar>

    </orh-table>
</template>
                
<script>
export default {
    name: 'dutymodule-otherteacherduty',
    components: {
        See: resolve => { require(['./See.vue'], resolve) },
    },
    data () {
        return {
            show: false,
            content: 'See',
            conditions: '',
            an_time: null,
            en_time: null,
            section: null,
            tableload: true,
            pageDate: {
                total: 0,
                current_page: 1,
                per_page: 0
            },
            sectionList: [
                {value: 1, label:'早自习'},
                {value: 5, label:'早读'},
                {value: 6, label:'自愿值班'},
                {value: 2, label:'第一晚自习'},
                {value: 3, label:'第二晚自习'},
                {value: 4, label:'第三晚自习'}
            ],
            data: [],
            columns: [],

            url: 'api/watchlist/v1/watchlistfrostatistics/useridsindexcont?page=',
            condition: null,
        }
    },
    methods: {
        
        /************************************************************
         * 
         * 选择时间
         * 
         ************************************************************/
        daterangeChange (val) {
            this.an_time = val[0] != ''?val[0]:null
            this.en_time = val[1] != ''?val[1]:null
        },
        
        /************************************************************
         * 
         * 选择时间
         * 
         ************************************************************/
        handleSubmit () {
            this.conditions = ''
            if (this.an_time != null && this.en_time != null) {
                this.conditions += '&an_time=' + this.an_time + '&en_time=' + this.en_time
            }
            if (this.section != null) {
                this.conditions += '&section=' + this.section
            }
            this.data = []
            this.columns = []
            this.tableload = true
            this.queryData (1)
        },
        
        /************************************************************
         * 
         * 手动刷新数据
         * 
         ************************************************************/
        refresh () {
            this.data = []
            this.columns = []
            this.conditions = ''
            this.section = null
            this.an_time = null
            this.en_time = null
            this.tableload = true
            this.queryData (1)
        },
        
        /************************************************************
         * 
         * 查看详情数据
         * 
         ************************************************************/
        SeeDetails (data) {
            this.condition = data
            this.show = true
        },
        
        /************************************************************
         * 
         * 请求分页数据
         * 
         ************************************************************/
        pagesData (index) {
            this.data = []
            this.columns = []
            this.tableload = true
            this.queryData (index)
        },
        
        /************************************************************
         * 
         * 请求列表数据
         * 
         ************************************************************/
        queryData (index) {
            this.$http.get(this.url + index + this.conditions).then(val=>{
                this.handelData(val.data[0])
                this.pageDate.per_page = val.pages.per_page
                this.pageDate.total = val.pages.total
                this.pageDate.current_page = val.pages.current_page
                this.data = val.data
                this.tableload = false
            }).catch(err => {
                this.tableload = false
            })
        },
        
        /************************************************************
         * 
         * 数据处理
         * 
         ************************************************************/
        handelData (data) {
            this.columns.push({
                title: '教师名称',
                minWidth: 150,
                fixed:'left',
                align: 'center',
                render:(h,params)=> {
                        return h('span',params.row.teacher_name?params.row.teacher_name.zh?params.row.teacher_name.zh:params.row.teacher_name.mn:'')
                    },
            })
            data.data.forEach(el => {
                this.columns.push({
                    title: el.watchlist_name.zh?el.watchlist_name.zh:el.watchlist_name.mn,
                    minWidth: 150,
                    align: 'center',
                    value: el.watchlist_id,
                    render: (h, params) => {
                        let name = params.row.data.find(i => i.watchlist_id == params.column.value)
                        return h('div', [
                            h('Button', {
                                props: {
                                    type: 'success',
                                    size: 'small',
                                    disabled: name.watchlistcont != 0?false:true
                                },
                                on: {
                                    click: () => {
                                        this.SeeDetails(name.watchlistcontapi)
                                    }
                                }
                            }, name.watchlistcont)
                        ])
                    }
                })
            })
            this.columns.push({
                title: '总统计',
                minWidth: 150,
                align: 'center',
                render: (h, params) => {
                    let name = params.row.data[0]
                    return h('div', name.cont)
                }
            })
        }
    },
    created(){
        this.queryData (1)
    },
}
</script>